$(function () {

  var currentPage = 1; // 记录当前页面 
  var pageSize = 5; // 每页条数 

  // 1 - 首页数据动态渲染 
  // 1- 通过ajax 去后台 获取 用户数据 
  // 2- 通过模板引擎把数据渲染到页面中
  // 我们对数据进行任何操作后，都需要重新渲染 ， 直接把渲染输的方法封装！
  function render () {
    $.ajax({
      type: 'get',
      url: '/user/queryUser',
      data: {
        page: currentPage, // 页码
        pageSize: pageSize // 每页条数
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 渲染 
        $('tbody').html(template('tmp', res));
        // res.total 表示的是数据库数据的总数  
        // 根据后台返回的真实总数 ，来生成分页标签
        setPage(res.total);
      }
    })
  }

  render();

  // 3- 禁用启用功能 
  // 1- 用户点击 禁用/启用按钮 ， 弹出模态框 ， 获取用户的id 和 要都进行操作（禁用，启用） 
  // 2- 当点击确定操作按钮后，就通过ajax把 id 和操作发送给后台， 让后台进行操作 
  // 3- 操作完成后，页面重新渲染， 看到操作后结果 

  var id = null; //用户id
  var isDelete = null; // 要进行操作 
  // 1- 用户点击 禁用/启用按钮 ， 弹出模态框 ， 获取用户的id 和 要都进行操作（禁用，启用） 
  $('tbody').on('click', '.btn-exec', function () {
    // 获取用户的id 
    // id = $(this).parent().attr('data-id');
    id = $(this).parent().data('id');  // data-id data-name  data('name');
    // 要都进行操作（禁用 0，启用 1）  
    isDelete = $(this).hasClass('btn-info') ? 1 : 0;
    console.log(id, isDelete);
  })

  // 2- 当点击确定操作按钮后，就通过ajax把 id 和操作发送给后台， 让后台进行操作 
  // 3- 操作完成后，页面重新渲染， 看到操作后结果 
  $('.btn-ok').click(function () {
    $.ajax({
      type: 'post',
      url: '/user/updateUser',
      data: {
        id: id,
        isDelete: isDelete
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 隐藏模态框
        $('.modal-user').modal('hide');
        // 重新渲染 
        render();
      }
    })
  })

  // 1-分页功能
  // 1- 获取数据库数据的总数，根据总数 推算出页码 
  // 2- 根据算出页码，生成对应的分页按钮（插件实现）
  // 3- 分页按钮个数，会根据数据的总数 变换而变化！

  // total 表示 数据库的数据的总数！ 
  function setPage (total) {
    //使用分页插件来生成 分页按钮  bootstrap-paginator.js 
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage, // 默认那个按钮高亮 
      totalPages: Math.ceil(total / pageSize),// 指定分页按钮的个数  12/5  --> 3
      onPageClicked: function (event, originalEvent, type, page) {
        //当每个分页按钮被点击后台，会执行这个函数 ， page 表示当前被点击页面
        console.log('page:', page);
        // 改变当前页取值 
        currentPage = page;
        // 页面需要重新渲染 
        render();
      }
    });
  }




});